import { EditOutlined, LeftOutlined } from "@ant-design/icons";
import { Button, Input, Space, Typography } from "antd";
import { ChangeEvent, FC, useState } from "react";
import { useNavigate } from "react-router-dom";
import EditToolbar from "./components/EditToolbar";
import useGetPageInfo from "../../../../../hooks/useGetPageInfo";
import { changePageTitle } from "../../../../../store/pageInfoReducer";
import { useDispatch } from "react-redux";
const { Title } = Typography;
// 显示和修改标题
const TitleElem: FC = () => {
  const { title } = useGetPageInfo();
  const dispatch = useDispatch();

  const [editState, SetEditState] = useState(false);

  const handleChange=(event: ChangeEvent<HTMLInputElement>) =>{
    const newTitle = event.target.value.trim();
    if (!newTitle) return;
    dispatch(changePageTitle(newTitle));
  }

  if (editState) {
    return (
      <Input
        value={title}
        onChange={handleChange}
        onPressEnter={() => SetEditState(false)}
        onBlur={() => SetEditState(false)}
      />
    );
  }
  return (
    <Space>
      <Title
        style={{
          fontSize: "16px",
          marginBottom: "0",
          lineHeight: "1",
        }}
      >
        {title?title:'新增问卷'}
      </Title>
      <Button
        icon={<EditOutlined />}
        type="text"
        onClick={() => SetEditState(true)}
      />
    </Space>
  );
};
// 编辑器头部
const EditHeader: FC = () => {
  const nav = useNavigate();

  return (
    <div className="bg-#fff b-b-solid b-b-1 b-b-#e8e8e8 py-2">
      <div className="flex mx-5 ">
        <div className="flex-1">
          <Space>
            <Button
              type="link"
              icon={<LeftOutlined />}
              onClick={() => {
                nav(-1);
              }}
            >
              返回
            </Button>
            <TitleElem />
          </Space>
        </div>
        <div className="flex-1 text-center">
          <EditToolbar />
        </div>
        <div className="flex-1 text-right">
          <Space>
            <Button>保存</Button>
            <Button type="primary">发布</Button>
          </Space>
        </div>
      </div>
    </div>
  );
};
export default EditHeader;
